<template>
    <div id="beginLive">
        <!-- <div class='box'> -->
            <div class='head'>
        <div id="broadcast-viewers-counter"></div>
                <div><img src="../../image/icon_camera.png" width='22' height='17' alt="" style="background:rgba(0,0,0,.3)"></div>
                <div class="last"><img @click='goBack' src="../../image/icon_closed.png" width='32' alt=""></div>
            </div>
      <!-- <div class="content"> -->
          <broadcast ref='child' v-bind:bcid="room_id"></broadcast>
      <!-- </div> -->
            <!-- <router-link to='living' class="beginLive">开始直播</router-link> -->
            <!-- <a @click='goLiving' class="beginLive">开始直播</a> -->
      <!-- </div> -->
      <!-- <div class='mask' v-show='showmask'>
          <h3>url: </h3>
          <h3>流密钥: {{obj.liu_name}}</h3>
      </div> -->
  </div>
</template>
<script>
import broadcast from '../broadcast.vue'
    export default {
        data() {
            return {
                bcid:this.$route.query.bcid,
                showmask: false,
                userid: '',
                obj: {
                    url: '',
                    liu_name: '',
                },
                room_id:'',
            }
        },
        components: {
            broadcast
        },
        filters: {

        },
        methods: {
            //根据用户id获取直播间信息
            init() {
                this.$api.get(this.$api.baseURLSchool,"select_cid/live_room/"+this.bcid,{},r => {
                    console.log(r);
                    if(r.data.ret == 1) {
                        this.room_id = r.data.info.id;
                    }
                },err => {
                    console.log(err);
                })
            },
            goBack() {
                //   退出房间
                this.$refs.child.changeStatus(this.room_id,0);
                // this.$router.back();
                
                if(window.connection) {
                    try {
                        window.connection.attachStreams.forEach(function(stream) {
                            stream.stop();
                        });

                        window.connection.close();
                    }
                    catch(e){}

                    window.connection = null;
                }
                document.getElementById('video-preview').pause();
                document.getElementById('video-preview').src = null;
                location.reload();
            },
        },
        created() {
            this.init();
        },
        mounted() {
        }
  }
</script>
<style lang="scss" scoped>
  .content{
    background: transparent;
  }
  .head{
    width: 100%;
    height: 5%;
    position: absolute;
    top: 5px;
    z-index: 99999;
    display: flex;
    justify-content: flex-start;
  }
  .head div{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 33.3%;
    height: 100%;
    background: transparent;
  }
  .head .last{
    justify-content: flex-end;
    padding-right: 10px;
  }
  .mask {
      position: fixed;
      width: 60%;
      height: auto;
      background: #fff;
      padding:15px;
      top:50%;
      left:50%;
      transform: translate(-50%,-50%);
      background: transparent;
      display: none;
  }
</style>
